﻿@model AboutModel

@{
    ViewData["Title"] = Model.Result.Query.Replace("\"", " ").Replace(",", " ") + ",";
}

@section Styles{
<style>
    body {
        margin-top: 10px;
        padding: 20px;
    }

    .grid {
        max-width: 100%;
        width: 100%;
        text-align: center;
    }

    .stext {
        font-size: 22px;
    }

    .stext_s {
        font-size: 18px;
    }

    B {
        color: red;
        font-weight: bolder;
    }

    I {
        font-weight: bolder;
        font-style: italic;
    }

    .gt {
        color: green;
    }

    .gtt {
        color: #4092cc;
    }

    .spartcss {}

    .kw {
        background-color: #eee;
    }

    .rtl {
        text-align: initial !important;
    }

    #maindiv {
        overflow-x: hidden !important;
    }
</style>
}


@section Scripts{
<script>
    var splitHelperPage = "About?q=";
    function splitHelper(more) {
        try {
            var html = "";
            if (more) {
                html = "<a>" + more + "</a>";
            }
            var sh = document.getElementById("searchHelp");
            var q = document.getElementsByName("q")[0];

            sh.innerHTML = html;
        } catch (e) {
        }
    }
</script>
<script>
    var multiTexts = {};
    function hideMultiText(loadedDivId) {
        var div = document.getElementById(loadedDivId);
        var es = div.getElementsByTagName("div");
        for (var i = 0; i < es.length; i++) {
            var hurl = es[i].getAttribute("hurl");
            if (hurl) {
                if (multiTexts[hurl]) {
                    //console.log("hurl hide " + hurl);
                    es[i].style.display = "none";
                } else {
                    multiTexts[hurl] = hurl;
                    es[i].style.display = "";
                }
            }
        }
    }
</script>
<script>
    var extitle = "";
    function highlight(loadedDivId) {

        var txt = document.title.substr(0, document.title.indexOf(','));
        txt = txt + " " + extitle;
        var div = document.getElementById(loadedDivId);
        var ts = div.getElementsByClassName("stext");
        var tshtml = [];
        for (var j = 0; j < ts.length; j++) {
            var html = ts[j].innerHTML;
            tshtml[j] = " " + html + " ";
        }

        var kws = txt.split(/[ 　]/);
        var kwsDo = {};
        for (var i = 0; i < kws.length; i++) {
            var kw = String(kws[i]).trim();
            if (kw.length < 1) {
                continue;
            }

            if (kwsDo[kw]) {
                continue;
            }
            kwsDo[kw] = kw;
            var kwreg = kw;
            var isword = kw.charCodeAt(0) < 0x3040;
            if (isword) {
                kwreg = "([\\s+|’|'])(" + kw + ")(\\W+)";
                kwreg2 = "$1<i>$2</i>$3";
            } else {
                kwreg = "(.+)(" + kw + ")(.+)";
                kwreg2 = "$1<b>$2</b>$3";
            }

            for (var j = 0; j < ts.length; j++) {
                var html = tshtml[j];
                tshtml[j] =
                    html.replace(new RegExp(kwreg, 'gi'), kwreg2);
            }
        }
        for (var j = 0; j < ts.length; j++) {
            var html = tshtml[j];
            ts[j].innerHTML = html;
        }
    }
</script>
<script>
    var div_load = null;
    document.addEventListener("scroll", function () {
        scroll_event();
    });
    function onscroll_loaddiv(divid, startId) {
        div_load = document.getElementById(divid);
        div_load.startId = startId;
        scroll_event();
    }
    function scroll_event() {
        if (div_load !== null) {
            var top = div_load.getBoundingClientRect().top;
            var se = document.documentElement.clientHeight;

            top = top - 500;
            if (top <= se) {
                var startId = div_load.startId;
                var div_load_bak = div_load;
                div_load = null;
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == XMLHttpRequest.DONE) {
                        var st = xhr.status;
                        if (st == 200) {
                            var html = xhr.responseText;
                            var frag = document.createElement("div");
                            frag.innerHTML = html;
                            var maindiv = document.getElementById('maindiv');
                            maindiv.appendChild(frag);

                            var ss = frag.getElementsByTagName("script");
                            for (var i = 0; i < ss.length; i++) {
                                eval(ss[i].innerHTML);
                            }
                        } else {
                            setTimeout(function () {
                                div_load = div_load_bak;
                                scroll_event();
                                //splitHelper("retry 3 " + st);
                            }, 2000);
                        }
                    }
                }
                var url = "Result?q=@Html.Raw(System.Net.WebUtility.UrlEncode(Model.Result.Query))" + "&s=" + startId;
                xhr.open('GET', url, true);
                xhr.send(null);
            }
        }
    }
    function onload_event() {
        onscroll_loaddiv('maindiv', '@long.MaxValue');
    }
</script>
}


<div class="grid">
    <div class="column">
        <form class="ui large form" action="About" onsubmit="formsubmit()">
            <div class="ui label input">

                <div class="ui action input">
                    <input name="q" value="@Model.Result.Query" required onfocus="formfocus()" dir="auto" />
                    <input id="btnsearch" type="submit" class="ui teal right button" value="Search" />
                </div>
            </div>
        </form>
        <div style="text-align:left" id="searchHelp"></div>
        <script>
            function formsubmit() {
                document.getElementById('btnsearch').disabled = "disabled";
            }
            function formfocus() {
                document.getElementById('btnsearch').disabled = undefined;
            }
        </script>
    </div>
</div>

<div class="grid">
    <div class="rtl column" id="maindiv">
        <br>
        @{
            //Html.RenderPartial( "ResultPartial", @Model.Result );
        }
        <partial name="ResultPartial" for="Result"></partial>
    </div>
</div>

<div class="grid">
    <a href="./"><i class="teal disk outline icon" style="font-size:70px"></i></a>
</div>